<template>
  <div class="newHome-box">
    <div class="user-info">
      <div class="search-box">
        <div class="search-left">
          <van-search v-model="value" placeholder="搜索" autocomplete="off" />
        </div>
        <div class="search-right">
          <img :src="require(`@/assets/public/icon1.png`)" alt=""/>
          <img :src="require(`@/assets/public/icon2.png`)" alt=""/>
          <img :src="require(`@/assets/public/icon3.png`)" alt=""/>
        </div>
      </div>
      <div class="top-btn-box">
        <div class="top-btn-li">
          <img :src="require(`@/assets/`+systemColor+`/bank-home-btn1.png`)" alt=""/>
          <div>余额查询</div>
        </div>
        <div class="top-btn-li">
          <img :src="require(`@/assets/`+systemColor+`/bank-home-btn2.png`)" alt=""/>
          <div>转账汇款</div>
        </div>
        <div class="top-btn-li">
          <img :src="require(`@/assets/`+systemColor+`/bank-home-btn3.png`)" alt=""/>
          <div>明细查询</div>
        </div>
        <div class="top-btn-li">
          <img :src="require(`@/assets/`+systemColor+`/bank-home-btn4.png`)" alt=""/>
          <div>扫一扫</div>
        </div>
      </div>
      <div class="gn_box_ul">
        <div v-for="(item,index) in routeList" :key="index">
          <router-link :to="{ path: item.path}">
            <div class="gn_box">
              <div class="gn_icon">
                <img :src="item.icon" alt=""/>
              </div>
              <span class="gn_name">{{ item.resourceName }}</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="home-button-box">
      <van-swipe :loop="false">
        <van-swipe-item>
          <div class="banner">
            <img :src="require(`@/assets/public/banner1.png`)" alt=""/>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="banner">
            <img :src="require(`@/assets/public/banner1.png`)" alt=""/>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="my-group-box">
      <!-- <router-link :to="{ path:'/' }"> -->
        <label class="my-group-label">
          <img :src="require(`@/assets/`+systemColor+`/bank-home-news-title.png`)" />
        </label>
        <!-- <marquee class="my-marquee">
          <marquee-item v-for="({ title,id }, index) in marqueeData" :key="index">
            <p class="my-marquee-item">{{ title }}</p>
          </marquee-item>
        </marquee> -->
        <div class="my-marquee">
          <div v-for="({ title,id }, index) in marqueeData" :key="index">
            <p class="my-marquee-item">{{ title }}</p>
          </div>
        </div>
      <!-- </router-link> -->
    </div>
    <div class="home-list-box">
      <van-tabs v-model="active" swipeable @change="tabChange">
        <van-tab v-for="tab,in1 in tabList" :title="tab.productType" :key='in1'>
          <div class="product_main">
                <div class="product_bg">
                  <div v-for="item,index in dataList" :key="index" v-if="index < 3" class="product_item" style="justify-content: space-between;" @click="toDetail(item)">
                    <div class="product_item_left">
                      <div class="product_price">
                        <div class="pro-price">{{item.quota}}<!-- <span> 万</span> --></div>
                        <p class="pro-title">最高可贷</p>
                        <van-divider class="vertical" />
                      </div>
                      <div class="product_item_item">
                        <div class="title">{{item.prodName}}</div>
                        <div>{{item.displaySlogn}}</div>
                        <div>年利率（单利）低至 {{item.ratio}}</div>
                        <div>{{item.displayOverall}}</div>
                      </div>
                    </div>
                    <div class="pro-arrow">
                      <van-icon name="arrow" />
                    </div>
                  </div>
                </div>
            <div class="arrow-more" @click="toList(tab.productType)">查看更多<van-icon name="arrow" /></div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="divider-footer-line">
      <van-divider :style="{ color: 'rgb(201, 205, 212)', borderColor: 'rgb(221, 221, 221)', padding: '0 20%', margin: '0', fontSize: '1.4rem' }">农村商业银行</van-divider>
      <group-title style="text-align: center;margin: 0;color: rgb(201, 205, 212);font-size: 1rem;">知农  惠商  行天下</group-title>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import setting from "@/setting";
export default {
  components: { },
  name: "bankEntrance",
  data() {
    return {
      systemColor: '',
      routeList:[],
      tabList: [
        // '特色推荐','经营贷','消费贷','按揭贷','兴农贷','经营贷','消费贷'
      ],
      active:'',
      dataList:[
        // {quota: '8000',prodName:'华夏财富宝',displaySlogn:'流程便捷、安全合规',ratio:'0.34%',displayOverall:'小微企业主、个体工商户、农户'},
      ],
      searchParam:{
        prodType: '',//产品分类
        prodName: '',//产品名称
        param1: '',//贷款主体
        param2: '',//担保方式
        param3: '',//贷款用途
        param4: '',//贷款额度
        param5: '',//贷款期限
        param6: '',//支用方式
        param7: '',//还款方式
      },
      marqueeData: [{title:'惠农助商，金融护航，助力预制菜产业腾飞',id: 1},{title:'共生共荣，引金融活水浇灌乡村希望的田野',id: 2}],
      value:''
    };
  },
  created: function() {
    this.systemColor = localStorage.getItem("systemColor");
    // this.querySugProdType();
    //将权限放到缓存中，提前拿出来。防止获取当前用户信息等待时间太长。每次进首页再更新下
    if (window.localStorage) {
      var userMsgJson = localStorage.getItem("userMsg");
      if (userMsgJson) {
        try {
          this.userMsg = JSON.parse(userMsgJson);
        } catch (error) {}
      }
    }
    this.getData();
  },
  methods: {
    getData() {
      var defer = this.baseService.postForm(
        this.__ctx + "/org/userResource/userMsg",
        { system: "mobile" }
      );
      defer.then(data => {
        if (!data.isOk) {
          if (data.code === "401") {
            if (setting.supportWxOauth2) {
              // this.toLogin();
            } else {
              // Vue.toLogin(this.getData);
              // this.$router.push({path:'/login'})
            }
          }
        } else {
          this.userMsg = data.data;
          localStorage.setItem("userMsg", JSON.stringify(data.data));
          this.querySugProdType();
        }
        this.getSystemColor();
      });
    },
    // 获取色系
    getSystemColor() {
      let defer = this.baseService.postForm(this.__ctx+"/plugin/mobileHome/getSystemColor");
      defer.then(res => {
        if (res.isOk) {
						// document.querySelector("html").setAttribute("class", "orangeSeries");  //橙色系
						// document.querySelector("html").setAttribute("class", "blueSeries");  //蓝色系
						document.querySelector("html").setAttribute("class", res.data);
            localStorage.setItem("systemColor", res.data);
            this.systemColor = localStorage.getItem("systemColor");
            this.routeList = [
              {resourceName: '存款', icon: require(`@/assets/`+this.systemColor+`/bank-home-ck.png`)},
              {resourceName: '贷款', icon: require(`@/assets/`+this.systemColor+`/bank-home-dk.png`), path: '/loanPage/newHome'},
              {resourceName: '信用卡', icon: require(`@/assets/`+this.systemColor+`/bank-home-xyk.png`)},
              {resourceName: '数字人民币', icon: require(`@/assets/`+this.systemColor+`/bank-home-szrmb.png`)},
              {resourceName: '跨境金融', icon: require(`@/assets/`+this.systemColor+`/bank-home-kjjr.png`)},
              {resourceName: '理财', icon: require(`@/assets/`+this.systemColor+`/bank-home-lc.png`)},
              {resourceName: '基金', icon: require(`@/assets/`+this.systemColor+`/bank-home-jj.png`)},
              {resourceName: '私人银行', icon: require(`@/assets/`+this.systemColor+`/bank-home-sryh.png`)}, 
              {resourceName: '保险', icon: require(`@/assets/`+this.systemColor+`/bank-home-bx.png`)},
              {resourceName: '全部', icon: require(`@/assets/`+this.systemColor+`/bank-home-qb.png`)}, 
            ]
					}
      });
    },
    toDetail(item){
      var query = {
        prodId: item.prodId
      }
      this.$router.push({path:'/loanPage/productDetail',query: query});
    },
    toList(item){
      this.$router.push({path:'/loanPage/productList',query: {title: item}});
    },
    // 产品分类
    querySugProdType(){
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/querySugProdType').then(res => {
        if(res.isOk){
          // const newArray = Object.entries(res.data).map(([key, value]) => {
          //   return { type: value.productType, version: value.version, delete: value.delete, isPublish: value.isPublish };
          // });
          this.tabList = res.data;
          this.searchParam.prodType = this.tabList[0].productType;
          this.querySugProd();
        }else{
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    // 产品数据
    querySugProd(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/querySugProd', this.searchParam).then(res => {
        this.$toast.clear();
        if(res.isOk){
          this.dataList = res.data;
        }else{
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    tabChange(e){
      this.searchParam.prodType = this.tabList[this.active].productType;
      // this.dataList = [];
      this.querySugProd();
    },
  },
};
</script>

<style scoped lang="less">
.newHome-box {
  .user-info {
    position: relative;
    background-image:url("../../assets/blueSeries/bank-home-bg.png");
    background-size: 100%;
    background-position: bottom;
    width: 100%;
    height: 30rem;
    margin-bottom: 1.2rem;

    .search-box{
      display: flex;
      align-items: center;
      padding: 0.6rem 1.2rem;
      .search-left{
        width: 100%;
        flex: 1;
        /deep/.van-search{
          padding: 0;
          background-color: transparent;
          .van-search__content{
            border: 1px solid rgba(255, 255, 255, 0.17);
            background-color: rgba(255, 255, 255, 0.23);
            border-radius: 3.2rem;
            color: #fff;
            .van-cell{
              line-height: 3.2rem;
              padding: 0 8px 0 0;
              .van-icon{
                color: #fff;
              }
            }
          }
          .van-field__control{
            color: #fff;
          }
        }
      }
      .search-right{
        display: flex;
        align-items: center;
        img{
          width: 2.4rem;
          height: 2.4rem;
          margin-left: 1.6rem;
        }
      }
    }

    .top-btn-box{
      display: flex;
      align-items: center;
      .top-btn-li{
        width: 25%;
        color: rgb(255, 255, 255);
        font-size: 1.4rem;
        line-height: 1.6rem;
        text-align: center;
        margin: 1.9rem 0 2.9rem;
        img{
          width: 3.2rem;
          height: 3.2rem;
          margin-bottom: 0.8rem;
        }
      }
    }
    
    .gn_box_ul{
      background: linear-gradient(180.00deg, rgb(255, 255, 255), rgb(244, 246, 248));
      color: rgb(29, 33, 41);
      border-radius: 1rem;
      font-size: 1.6rem;
      // margin: 1.3rem;
      position: absolute;
      right:1.2rem;
      left: 1.2rem;
      text-align: center;
      min-height: 15.6rem;

      >div{
        width: 20%;
        height: 50%;
        float: left;
      }
      .gn_box {
        width: 100%;
        padding-top: 1.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .gn_icon {
          width: 3rem;
          height: 3rem;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2rem;
          color: #ffffff;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .gn_name {
          font-weight: 400;
          font-size: 1.2rem;
          line-height: 1.4rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          text-align: center;
          margin-top: 0.8rem;
          color: rgba(29, 33, 41, 0.9);
        }
      }
    }
  }
  .home-button-box{
    background: rgb(255, 255, 255);
    border-radius: 1rem;
    font-size: 1.2rem;
    margin: 1.2rem;

    .banner{
      width: 100%;
      img{
        width: 100%;
        float: left;
      }
    }
    
    /deep/.van-swipe__indicators{
      .van-swipe__indicator{
        background-color: rgba(0, 0, 0, 0.1);
      }
      .van-swipe__indicator--active{
        background-color: rgb(255, 255, 255);
        width: 12px;
        border-radius: 6px;
      }
    }
  }
  .my-group-box{
    width: calc(~'100% - 2.4rem');
    margin: 1.2rem;
    background-color: rgb(255, 255, 255);
    height: 7.3rem;
    border-radius: 10px;
    .my-group-label {
      display: inline-block;
      width: 5.6rem;
      vertical-align: top;
      text-align: center;
      position: relative;
      img{
        width: 4.4rem;
        margin-top: 1.2rem;
        margin-left: 1.2rem;
      }
      .vux-badge {
        position: absolute;
        left: 33px;
        top: 6px;
      }
    }
    .my-marquee {
      display: inline-block;
      width: calc(~"100% - 7.2rem");
      margin-left: 1.2rem;
      padding: 1rem 0;
      .my-marquee-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 95%;
        color: rgb(78, 89, 105);
        font-size: 1.4rem;
        line-height: 2rem;
        margin-top: 0.6rem;
      }
    }
  }
  .home-list-box{
    margin: 1.2rem 1.2rem 7.3rem;
    background: rgb(255, 255, 255);
    border-radius: 1rem;
    font-size: 1.4rem;
    overflow: hidden;
    padding: 0 1.2rem;

    /deep/.van-tabs--line .van-tabs__wrap{
      height: 4.4rem;
      .van-tabs__nav--line.van-tabs__nav--complete{
        padding-left: 0;
      }
      .van-tab{
        font-size: 1.4rem;
      }
      .van-tab--active{
        font-weight: 700;
        font-size: 1.6rem;
      }
      .van-tabs__line{
        background: linear-gradient(270.00deg, var(--gradient2-color), var(--primary-color));
      }
    }
  }
  .product_main {
    .product_bg{
      background: #fff;
      width: 100%;
      margin: 1.2rem auto;

      .product_item {
        display: flex;
        background: linear-gradient(90.00deg, var(--price-bg-color), var(--price-bg0-color)), linear-gradient(360.00deg, var(--price-bg-color), var(--price-bg0-color));
        color: rgb(29, 33, 41);
        font-size: 1.6rem;
        margin-bottom: 1.2rem;
        border-radius: 1rem;
        padding: 1.2rem;

        .product_item_left {
          display: flex;
          align-items: center;
          width: 97%;
          .product_price{
            min-width: 35%;
            text-align: center;
            position: relative;
            padding-right: 1rem;
            .pro-price{
              font-size: 2.2rem;
              color: var(--primary-color);
              span{
                font-size: 1.4rem;
              }
            }
            .pro-title{
              font-size: 1.2rem;
              color: rgb(134, 144, 156);
            }
            .vertical{
              width: 26px;
              transform: rotate(90deg);
              margin: 0;
              border-color: rgba(0, 0, 0, 0.2);
              position: absolute;
              right: 0;
              top: 50%;
            }
          }
          .product_item_item {
            width: 65%;
            display: flex;
            flex-direction: column;
            flex: 1;
            // line-height: 0.25rem;
            // padding-top: 0.14rem;
            font-size: 1.4rem;
            color: rgba(29, 33, 41, 0.54);
            div{
              width: 93%;
              margin-bottom: 0.3rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .title{
              font-size: 1.6rem;
              font-weight: 700;
              line-height: 2rem;
              color: rgb(29, 33, 41);
              margin-bottom: 1.2rem;
              width: 93%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        .pro-arrow{
          display:flex;
          align-items: center;
          /deep/.van-icon:before{
            width:0.84rem;
            color: rgb(201, 205, 212);
          }
        }
      }
    }
    .arrow-more{
      font-size: 1.2rem;
      line-height: 2rem;
      color: #4E5969;
      text-align: center;
      height: 4rem;
    }
  }
}
// 橙色系
.orangeSeries .user-info {
  background-image: url('../../assets/orangeSeries/bank-home-bg.png');
}
// 蓝色系
.blueSeries .user-info {
  background-image: url('../../assets/blueSeries/bank-home-bg.png');
}
.divider-footer-line{
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: -1;
}
</style>
